<template>
	<view class="drag-box   ">
		<top-navigation :isBack="false" isShow isFix>
			<template #center-slot>
				<view class="paihang">
					<x-btn>图标支持拖拽排序</x-btn>
				</view>
			</template>
		</top-navigation>
		<view class="popup flex-col justify-between align-center" v-if="confirmShow">
			<view class="LcdD" style="font-size: 50rpx;">
				公告
			</view>
			<view class="">
				{{crystalList[0].parss}}
			</view>

			<view class="justify-between" style="width: 100%;">
				<x-btn @tap="close">关闭</x-btn>
			</view>
		</view>
		<!-- controlsList 表示控件的列表  controlsSize 表示每个控件的大小 -->
		<drag-and-drop-sort v-if="monted&&PageCur==0" :controlsList="dataArray" :sc='crystalList[0].score'
			:controlsSize="{width: dragAndDropBoxWidthAndHeight, height: dragAndDropBoxWidthAndHeight}">
			<!-- 自定义内容 -->
			<template #content="{item}">
				<view :style="{'background': item.color}"
					style="display: flex;flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%;border-radius: 15rpx;overflow: hidden;">
					{{item.src?'':item.label}}
					<image :src="item.src"
						:style="{width: dragAndDropBoxWidthAndHeight+'px', height: dragAndDropBoxWidthAndHeight+'px'}">
					</image>
					<view class="name" :style="{color:item.textColor}">
						{{item.name}}
					</view>
				</view>
			</template>
		</drag-and-drop-sort>

		<view class="disk" v-show="!confirmShow">
			<canvas canvas-id="clockCanvas" id="clockCanvas" type="2d" class="clock"></canvas>
		</view>
		<mineVue v-if="PageCur==1"></mineVue>
		<view class="tabbar ">
			<view class="tabbar-img-box ">
				<image class="tabbar-people" :src="`/static/tabbar${PageCur==0?'-1':''}.png`" mode=""></image>
				<image @tap="PageCur = (PageCur==0?1:0)" class="xiao-ji"
					:src="`/static/${PageCur==0?'xiao-ji':'da-ji'}.png`" mode=""
					:style="{width:PageCur==0?'179rpx':'580rpx'}"></image>
			</view>
			<view :style="{'margin':index===2?'0 10rpx':'0'}" :class="PageCur == index?'tabcli':''"
				v-for="(item,index) in tabbar" :key="index" @tap="getPageCur(index)">
				<x-btn :padd="PageCur == index?'20rpx':'15rpx'"><text
						:style="{color:PageCur == index?'#000':'#737373'}">{{item.name}}</text></x-btn>

			</view>
		</view>
		<bs-particles v-if="canvasShow" :particlestyle="particlestyle"></bs-particles>
	</view>
</template>

<script setup>
	const db = uniCloud.database();
	import mineVue from '../mine/mine.vue';
	import {
		onShow,
		onReady,
		onReachBottom,
		onPageScroll,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import {
		reactive,
		getCurrentInstance,
		ref,
		onMounted,
		toRefs,
	} from 'vue'

	import dragAndDropSort from './drag-and-drop-sort-A.vue';

	import {
		onShareAppMessage,
		onShareTimeline
	} from '@dcloudio/uni-app';
	const canvasShow = ref(false)
	onMounted(() => {
		setTimeout(() => {
			canvasShow.value = true
		})
		getList()
		uni.getSystemInfo({
			success: function(res) {
				// console.log(res.windowWidth)
				dragAndDropBoxWidthAndHeight.value = (res.windowWidth - 60) / 5
				monted.value = true
			}
		})
		canvasInit()
		// console.log(拖拽盒宽高.value)
	})
	const particlestyle = ref({
		"style": "snow",
		"zindex": -1,
		"bgcolor": "#000022"
	})
	const crystalList = ref('')
	const getList = async () => {
		uni.showLoading({
			title: '加载中'
		})
		const res = await db.collection('bs-notice').limit(10)
			.orderBy('score', 'desc') // 按照score字段降序排序
			.get()
		crystalList.value = res.result.data
		if (res.result.data[0].score == 0) {
			dataArray.value = dataArray.value.slice(1)
			console.log('dataArray.value', dataArray.value);
		}
		uni.hideLoading()
	}
	const getPageCur = (index) => {

		if (PageCur.value == index) return
		PageCur.value = index

	}
	const clockTimer = ref(null)
	const clockContext = ref(null)
	const requestAnimationFrame = ref(null)
	// clockContext.value = uni.createCanvasContext('clockCanvas')
	const canvasInit = () => {
		const ins = getCurrentInstance();
		const query = uni.createSelectorQuery().in(ins.proxy);


		query.select("#clockCanvas").fields({
			size: true,
			node: true
		}).exec((res) => {
			console.log(res, 'res');
			// Canvas 对象
			const canvas = res[0].node;
			canvas.width = 200
			canvas.height = 200
			clockContext.value = canvas.getContext("2d")
			// 这里可以执行 canvas 提供的方法
			// https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Canvas.requestAnimationFrame.html
			requestAnimationFrame.value = canvas.requestAnimationFrame
			startClock()
			console.log('requestAnimationFrame', canvas.requestAnimationFrame);
		})
	}

	const startClock = () => {
		// clockTimer.value = setInterval(() => {
		// 	drawClock();
		// }, 1000);
		drawClock()
		requestAnimationFrame.value(startClock)
		// clockContext.value.requestAnimationFrame(drawClock)
	}

	const drawClock = () => {
		const ctx = clockContext.value;

		// 清空画布
		ctx.clearRect(0, 0, 300, 300);

		// 绘制表盘
		ctx.beginPath();
		// 圆的位置 
		const circularX = 100
		const circularY = 100
		// 圆的半径
		const circularR = circularX - 3
		// scale半径
		const scaleR = circularX - 30
		// clockwise半径
		const clockwiseR = circularX - 21
		// minuteHand半径
		const minuteHandR = circularX - 12
		// second半径
		const secondR = circularX - 9
		ctx.arc(circularX, circularY, circularR, 0, 2 * Math.PI); //第一、二个参数为表盘位置，第三个参数为表盘大小
		ctx.lineWidth = 1; //表盘线的粗细
		ctx.strokeStyle = '#FFF'; //表盘线的颜色
		ctx.stroke();

		ctx.beginPath();
		ctx.arc(circularX, circularY, 3, 0, 2 * Math.PI); //第三个参数为大小
		ctx.strokeStyle = '#FFF'; //时钟刻度颜色
		ctx.fill();
		ctx.stroke();
		// 画时刻度
		for (var i = 0; i < 12; i++) {
			ctx.beginPath()
			ctx.save()
			ctx.translate(circularX, circularY)
			ctx.lineWidth = 2
			ctx.strokeStyle = '#FFF'
			ctx.rotate(i * 30 * Math.PI / 180)
			ctx.moveTo(0, -circularX + 15)
			ctx.lineTo(0, -circularX + 5)
			ctx.stroke()
			ctx.restore()
			ctx.closePath()
		}
		// 画分刻度
		for (var i = 0; i < 60; i++) {
			ctx.beginPath()
			ctx.save()
			ctx.translate(circularX, circularY)
			ctx.lineWidth = 1
			ctx.strokeStyle = '#FFF'
			ctx.rotate(i * 6 * Math.PI / 180)
			ctx.moveTo(0, -circularX + 10)
			ctx.lineTo(0, -circularX + 5)
			ctx.stroke()
			ctx.restore()
			ctx.closePath()
		}

		// 绘制时钟刻度
		for (let i = 0; i < 12; i++) {
			ctx.setTransform(1, 0, 0, 1, 0, 0);
			ctx.translate(-8, 8);
			const angle = i * (Math.PI / 6) - Math.PI / 2;
			const x = circularX + Math.cos(angle) * scaleR; //时钟刻度X轴位置
			const y = circularY + Math.sin(angle) * scaleR; //时钟刻度Y轴位置

			// ctx.beginPath();
			// ctx.arc(x, y, 3, 0, 2 * Math.PI); //第三个参数为大小
			// ctx.strokeStyle = '#000'; //时钟刻度颜色
			// ctx.fill();
			ctx.font = "20px Verdana";
			// 创建渐变
			var gradient = ctx.createLinearGradient(0, 0, circularX, 0);

			gradient.addColorStop("1.0", "#FFF");
			// 用渐变填色
			ctx.fillStyle = gradient;
			ctx.fillText(i || 12, x, y);
		}
		ctx.setTransform(1, 0, 0, 1, 0, 0);
		// 获取当前时间
		const now = new Date();
		const hours = now.getHours();
		const minutes = now.getMinutes();
		const seconds = now.getSeconds();

		// 绘制时针
		const hourAngle = (hours % 12 + minutes / 60 + seconds / 3600) * (Math.PI / 6) - Math.PI / 2;
		const hourX = circularX + Math.cos(hourAngle) * clockwiseR; //时针X轴位置
		const hourY = circularY + Math.sin(hourAngle) * clockwiseR; //时针Y轴位置

		ctx.beginPath();
		ctx.lineWidth = 2 //时针的粗细
		ctx.strokeStyle = '#FFF'; //时针颜色
		ctx.moveTo(circularX, circularY); //时针围绕中心点
		ctx.lineTo(hourX, hourY);
		ctx.stroke();

		// 绘制分针
		const minuteAngle = (minutes + seconds / 60) * (Math.PI / 30) - Math.PI / 2;
		const minuteX = circularX + Math.cos(minuteAngle) * minuteHandR; //分针X轴位置
		const minuteY = circularY + Math.sin(minuteAngle) * minuteHandR; //分针Y轴位置

		ctx.beginPath();
		ctx.lineWidth = 1.5; //分针的粗细
		ctx.strokeStyle = '#FFF'; //分针颜色
		ctx.moveTo(circularX, circularY); //分针围绕中心点
		ctx.lineTo(minuteX, minuteY);
		ctx.stroke();

		// 绘制秒针
		const secondAngle = (seconds + now.getMilliseconds() / 1000) * (Math.PI / 30) - Math.PI / 2;
		const secondX = circularX + Math.cos(secondAngle) * secondR; //分针X轴位置
		const secondY = circularY + Math.sin(secondAngle) * secondR; //分针Y轴位置

		ctx.beginPath();
		ctx.lineWidth = 1; //分针的粗细
		ctx.strokeStyle = '#f00'; //分针颜色
		ctx.moveTo(circularX, circularY); //分针围绕中心点
		ctx.lineTo(secondX, secondY);
		ctx.stroke();

		// ctx.draw();
	}
	const confirmShow = ref(true)
	const confirmShowVal = uni.getStorageSync('confirmShow')
	if (confirmShowVal == 1) {
		confirmShow.value = false
	} else {
		confirmShow.value = true
	}
	const close = () => {
		uni.setStorageSync('confirmShow', 1)
		confirmShow.value = false
	}
	const data = reactive({

		oldPageCur: 0,
		PageCur: 0, //tab下标
		tabbar: [{ //tab数据
				name: '首页',
				iconNmae: 'home',
				url: '/static/home',
			},

			{
				name: '我的',
				url: '/static/mine',
				iconNmae: 'account',
			},
		],
		scrollTop: 0,
		mode: 'circle',
		iconStyle: {
			fontSize: '32rpx',
			color: '#FFF'
		},
		customStyle: {
			background: '#2979ff'
		},
	})
	const {
		scrollTop,
		mode,
		iconStyle,
		customStyle,
		oldPageCur,
		PageCur,
		tabbar
	} = toRefs(data)
	// onShareAppMessage(() => {
	// 	return {
	// 		title: '鱼了么',
	// 		path: '/pages/index/index'
	// 	}
	// })

	// onShareTimeline(() => {
	// 	return {
	// 		title: '鱼了么',
	// 		path: '/pages/index/index'
	// 	}
	// })
	const dataArray = ref([{
			color: '#ffe874',
			label: '1',
			textColor: '#000',
			src: '/static/icons/9.png',
			name: '读书人',
			navto: '/reading/pages/book/index'
		},
		{
			color: '#42b983',
			label: '4',
			textColor: '#FFF',
			src: '/static/icons/4.png',
			name: '备忘录',
			navto: '/tool/notes/notes'
		},
		{
			color: '#f5aa41',
			label: '3',
			textColor: '#FFF',
			src: '/static/icons/3.png',
			name: '尺子',
			navto: '/tool/ruler/ruler'
		},
		{
			color: '#1983fb',
			label: '1',
			textColor: '#FFF',
			src: '/static/icons/5.png',
			name: '减肥食谱',
			navto: '/tool/recipe/recipe'
		},
		{
			color: '#00a8fb',
			label: '2',
			textColor: '#FFF',
			src: '/static/icons/10.png',
			name: '酒桌娱乐',
			navto: '/cardgame/game/game'
		},
		{
			color: '#ee3131',
			label: '1',
			textColor: '#FFF',
			src: '/static/icons/1.png',
			name: '知识问答',
			navto: '/pages/chat/chat'
		},
		{
			color: '#a15afd',
			label: '1',
			textColor: '#FFF',
			src: '/static/icons/8.png',
			name: '打地鼠',
			navto: '/mousegame/game/game'
		},
		{
			color: '#f36586',
			label: '1',
			textColor: '#FFF',
			src: '/static/icons/2.png',
			name: '娱乐休闲',
			navto: '/game/game/game'
		},
		{
			color: '#16d46b',
			label: '1',
			textColor: '#FFF',
			src: '/static/icons/11.png',
			name: '祭奠',
			navto: '/grave/grave/grave'
		},
		// {color: '#16d46b', label: '10'},
	])

	const monted = ref(false)
	const dragAndDropBoxWidthAndHeight = ref(100)
</script>
<style lang="scss">
	.disk {
		position: fixed;
		top: 80%;
		left: 50%;
		transform: translate(-30%, -90%);
		width: 200px;
		height: 200px;
		z-index: 100;
		// background-color: #FFF;
		// border-radius: 50%;
		// box-shadow: 0 0 10px #000;
		// animation: rotate 5s linear infinite;
		// @keyframes rotate {
		// 	from {
		// 		transform: rotate(0deg);
		// 	}
	}

	.clock {
		width: 200px;
		height: 200px;
	}

	.popup {
		padding: 50rpx;
		border-radius: 20rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 700rpx;
		height: 500rpx;
		background-color: #FFF;
		z-index: 101;
		color: #000;
	}

	.drag-box {
		width: 100vw;
		min-height: 100vh;



		.name {
			font-size: 26rpx;
			color: #FFF;
		}
	}

	.tabbar {

		// background: linear-gradient(180deg, #E53935 0%, #E35D5B 100%);
		position: fixed;
		left: 0rpx;
		bottom: 0rpx;
		width: 750rpx;
		min-height: 106rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		font-size: 22rpx;
		font-weight: 400;
		color: rgba(255, 255, 255, 0.87);
		z-index: 11;
		padding-top: 20rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.tabbar-img-box {
			left: 0;
			top: 80rpx;
			position: absolute;
			// transform: translate(0, 80rpx);
		}

		.tabbar-people {
			position: absolute;
			left: 0;
			bottom: 0;
			// bottom: constant(safe-area-inset-bottom);
			// bottom: env(safe-area-inset-bottom);
			width: 100rpx;
			height: 300rpx;
			z-index: 1;
		}

		.xiao-ji {
			// width: 179rpx;
			position: absolute;
			bottom: 50rpx;
			// bottom: calc(50rpx + env(safe-area-inset-bottom));
			// bottom: calc(50rpx + constant(safe-area-inset-bottom));
			left: 50rpx;
			height: 70rpx;
			transition: all .5s ease-out;
		}

		view {
			width: 150rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 38rpx;
				height: 30rpx;
				margin-bottom: 10rpx;
			}
		}

		.tabcli {
			color: rgba(0, 0, 0, 0.87);
		}

		.qr-code-img {

			position: absolute;
			top: -75rpx;
			width: 128rpx;
			height: 128rpx;
			border-radius: 50%;
			background: #C90F18;

			image {
				width: 68rpx;
				height: 68rpx;
				margin-bottom: 0;
			}

			&::after {
				content: '';
				position: absolute;
				width: 30px;
				height: 30px;
				line-height: 100px;
				display: block;
				text-align: center;
				// background-image: radial-gradient(600px at 28px 0px, #00000000 30px, #fff 30px);
				top: 40rpx;
				right: -52rpx;
				z-index: -1;
				background-image: radial-gradient(41px at 28px -10px, #00000000 30px, #fff 30px);
			}

			&::before {
				content: '';
				position: absolute;
				width: 30px;
				height: 30px;
				line-height: 100px;
				display: block;
				text-align: center;
				background-image: radial-gradient(41px at 4px -10px, #00000000 30px, #fff 30px);
				top: 40rpx;
				left: -52rpx;
				z-index: -1;
			}
		}
	}
</style>